import React, {Component} from 'react';
import { Button, Input, Spin, Row, Col, Divider,Tooltip } from 'antd';
import {findStubList, getStubGroupDetail, processData} from '../../fetch/fetchApi';
import '../../assets/stylus/com/display/process.styl'
import G2 from '@antv/g2';
class ProgressChart extends Component {
  constructor (props) {
    super(props);
    this.props = props;
    this.init();
  }

  componentDidMount () {
    window.LayoutTab && setTimeout(() => {
      this.queryChargeInfo();
    }, 1);
  }

  init () {
    this.query = {
      page: '1',
      pagecount: '10'
    };
    window.LayoutTab && window.LayoutTab.tabParam && (this.query['orderId'] = window.LayoutTab.tabParam.orderId);
  }

  queryChargeInfo () {
    this.getProcessData(this.query['orderId']).then((data) => {
      this.generateProcessData(data);
    });
  }

  generateProcessData (data) {
    // 过程数据类型数组
    const processList = [
      {name: 'voltage', secname: 'voltageCar'},
      {name: 'current', secname: 'currentCar'},
      {name: 'soc'},
      {name: 'power'},
      {name: 'tempCar'},
      {name: 'tempGun'}
      ];
    if (data.code === '200') {
      let result = data.data.his;
      if(!result){
        return;
      }
      result = result.reverse();
      result.forEach((e, index) => {
        for (let p of processList) {
          p['arr'] || (p['arr'] = []);
          const [pVal, pTime] = [e[p.name] ? parseFloat(e[p.name]) : 0, this.translateTime(e.time)];
          p['arr'].push({
            attr: p.name,
            time: pTime,
            value: pVal
          });
          let secVal = 0;
          if (p.secname) {
            secVal= e[p.secname] ? parseFloat(e[p.secname]) : 0;
            p['arr'].push({
              attr: p.secname,
              time: pTime,
              value: secVal
            });
          }

          // 获取数据范围
          if (index === 0) {
            p['limitMin'] = pVal;
            p['timeMin'] = pTime;
            p.secname && (p['limitMin'] = 0);
          }

          if (index === (result.length - 1)) {
            p['limitMax'] = pVal;
            if (p.secname) {
              p['limitMax'] = (pVal < secVal ? secVal : pVal);
              p.secname === 'voltageCar' && (p['limitMax'] += 50);
              p.secname === 'currentCar' && (p['limitMax'] += 20);
            }
          }
        }
      });

      for (let process of processList) {
        var chart = new G2.Chart({
          container: this.query['orderId'] + 'g2' + process.name,
          width: 1420,
          height: 200,
          forceFit: true,
          padding: [ 30, 40, 36, 50 ]
        });
        chart.source(process.arr, {
          time: {
            tickCount: 5,
            range: [0, 1]
          }
        });

        // 建构纵向刻度范围

        let ticks = [];
        console.log(process);
        let [ticksLen , ticksDistance]= [process.limitMax - process.limitMin, ((process.limitMax - process.limitMin) / 4).toFixed(3)];
        ticksLen || (process.limitMin = process.limitMin - 100);
        for (let i = 0, l = 5; i < l; i += 1) {
          ticksLen ? ticks.push(parseFloat(process.limitMin + parseFloat(i * ticksDistance)).toFixed(2)) : (ticks.push(parseFloat(process.limitMin + 50 * i).toFixed(2)));
        }
        chart.scale('value', {
          min: process.limitMin,
          ticks
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart.line().position('time*value').color('attr').shape('smooth');
        // chart.point().position('time*value').size(4).shape('circle').style({
        //   stroke: '#fff',
        //   lineWidth: 1
        // });
        chart.render();
      }
    }
  }

  translateTime (e) {
    const time = e;
    const newTime = new Date(parseInt(time));
    const hours = newTime.getHours() < 10 ? '0' + newTime.getHours(): newTime.getHours();
    const minutes = newTime.getMinutes() < 10 ? '0' + newTime.getMinutes(): newTime.getMinutes();
    const seconds = newTime.getSeconds() < 10 ? '0' + newTime.getSeconds(): newTime.getSeconds();
    return `${hours}:${minutes}:${seconds}`;
  }

  async getProcessData (id) {
    try {
      const resData = await processData({
        orderId: id
      });
      return resData.data;
    } catch (e) {
      console.log(e);
    }
  }

  render () {
    const Content = <div className="sc-page-content">
      <div className={'g2item'}>
        <div className={'g2label'}>电压</div>
        <div className={'g2container'} id={this.query['orderId'] + 'g2voltage'}></div>
      </div>
      <div className={'g2item'}>
        <div className={'g2label'}>电流</div>
        <div className={'g2container'} id={this.query['orderId'] + 'g2current'}></div>
      </div>
      <div className={'g2item'}>
        <div className={'g2label'}>SOC</div>
        <div className={'g2container'} id={this.query['orderId'] + 'g2soc'}></div>
      </div>
      <div className={'g2item'}>
        <div className={'g2label'}>电量</div>
        <div className={'g2container'} id={this.query['orderId'] + 'g2power'}></div>
      </div>
      <div className={'g2item'}>
        <div className={'g2label'}>电池温度</div>
        <div className={'g2container'} id={this.query['orderId'] + 'g2tempCar'}></div>
      </div>
      <div className={'g2item'}>
        <div className={'g2label'}>枪端温度</div>
        <div className={'g2container'} id={this.query['orderId'] + 'g2tempGun'}></div>
      </div>
    </div>;
    return Content;
  }
}

export default ProgressChart;